<template>
  <div class="tabbar">
      <!-- <img src="" alt=""> -->
      <div class="tabbar_box  iphoneXHeight" :style="{'background-color':tabbar.backgroundColor}">
           <template v-for="item in tabbar.list" v-key="item.pagePath">
            <!-- <div>{{item.pagePath}}</div> -->
              <div @click="nav" v-if="item.isSpecial" class="tabbar_nav"   :data-url="item.pagePath" :style="{'color':$route.path == item.pagePath ? tabbar.selectedColor : tabbar.color}">
                  <div class='special-wrapper'>
                      <img class="tabbar_icon" :src="$route.path == item.pagePath ? item.selectedIconPath : item.iconPath" />
                  </div>
                  <img class='special-text-wrapper' />
                  <span  v-text="item.text"></span>
              </div>
              <div @click="nav" v-else class="tabbar_nav"  :data-url="item.pagePath"
                        :style="{'color':$route.path == item.pagePath ? tabbar.selectedColor : tabbar.color}">
                  <img class="tabbar_icon" :src="$route.path == item.pagePath ? item.selectedIconPath : item.iconPath" />
                  <span v-text="item.text"></span>
              </div>
          </template>
      </div>
  </div>
</template>

<style lang="stylus"  scoped>
.tabbar{
     box-sizing:content-box
}
.tabbar_box {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 3.75rem;
    box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.1);
}

.tabbar_box.iphoneX-height {
    padding-bottom: 4.125rem;
}

.middle-wrapper 
    position absolute
    right 19.375rem
    bottom 0
    background-color rgb(121, 27, 27)
    width 7.5rem
    height 7.5rem
    border-radius 50%
    border-top 0.125rem solid #f2f2f3


.middle-wrapper.iphoneX-height 
    bottom 4.125rem


.tabbar_nav 
  flex 1
  display flex
  flex-direction column
  justify-content space-between
  align-items center
  font-size .3rem
  height 100%
  padding 0.3125rem 0px 0.3125rem 0px
  position relative
  box-sizing border-box
  span
    z-index 9

.tabbar_icon 
  width 2rem
  height 2rem
  padding-bottom 0.3125rem

.special-wrapper 
  position absolute
  top -2.25rem
  width 7.0625rem
  height 6.8125rem
  border-radius 50%
  background-color #fff
  box-sizing border-box
  padding 0.875rem
  display flex
  justify-content center

.special-wrapper .tabbar_icon {
    width 3rem
    height 3rem
}

.special-text-wrapper {
    width 3.5rem
    height 3.5rem
}
</style>
<script>
export default {
  name: "tabbar",
  components: {
  },
  data() {
    return {
      tabbar:{//用tabbar是为了未来如果有可能移植有更好的扩展性
        backgroundColor:"#ffffff",//导航条背景色
        color: "#979795",//未激活样式
        selectedColor: "#1c1c1b",//激活样式
        list:[{//其实这里可以用assets别名
                          "pagePath": "/",
                          "selectedIconPath": require("@/assets/images/tabbar/foot1_03.png"),
                          "iconPath": require("@/assets/images/tabbar/foot_03.png"),
                          "text": "首页"
                      },
                      {
                          "pagePath": "/shop",
                          "selectedIconPath": require("@/assets/images/tabbar/foot1_05.png"),
                          "iconPath": require("@/assets/images/tabbar/foot_05.png"),
                          "text": "商城"
                      },
                      {
                          "pagePath": "/sheep",
                          "selectedIconPath": require("@/assets/images/tabbar/sheep_03.png"),
                          "iconPath": require("@/assets/images/tabbar/sheep_03.png"),
                        "isSpecial": true,
                          "text": "养羊"
                      },
                      {
                          "pagePath": "/cart",
                          "selectedIconPath": require("@/assets/images/tabbar/foot1_07.png"),
                          "iconPath": require("@/assets/images/tabbar/foot_07.png"),
                          "text": "购物车"
                      },
                      {
                          "pagePath": "/me",
                          "selectedIconPath": require("@/assets/images/tabbar/foot1_09.png"),
                          "iconPath": require("@/assets/images/tabbar/foot_09.png"),
                          "text": "我的"
                      }]
      }
    };
  },
  created(){
  },
  methods: {
    nav(e){
        console.log(e.currentTarget.dataset.url)
        this.$router.replace(e.currentTarget.dataset.url)
    },
    submit() {
      let that = this;
      let { iphone, password } = that;
      if (iphone && password) {
        this.axios({
          url: "/api/login",
          method: "POST",
          params: {
            password,
            phone: iphone,
          },
        }).then((response) => {
          console.log(response);
        });
      }
    },
  },
};
</script>
